<template>
  <view>
    <view class="form-fee-content-title">
      <span class="form-fee-content-title-text">{{ title }} {{ index + 1 }}</span>
      <view @click="handleDelete(index)">
        <ve-icon name="delete_1" color="rgba(23,22, 22, 1)" size="36" />
      </view>
    </view>

    <view class="form-fee-content-content">
      <ve-form-item label="保险公司" required :prop="`compulsory.${index}.insureCompany`">
        <remote-select
          :multiple="false"
          :type="remoteSelectData.attrs.type"
          v-model="info!.insureCompany"
          v-model:label="remoteSelectData.label"
          :params="{
            id: info!.insureCompany,
          }"
        ></remote-select>
      </ve-form-item>
      <ve-form-item label="保险单号">
        <ve-input placeholder="请输入" v-model="info!.insureNo" :maxlength="30" />
      </ve-form-item>
      <ve-form-item label="有效期" labelPosition="top" required :prop="`compulsory.${index}.times`">
        <ve-daterange-picker
          v-model:start="info!.beginDate"
          v-model:end="info!.endDate"
          :placeholder="['开始时间', '结束时间']"
          mode="date"
          @confirm="timeRangeConfirmFn"
        />
      </ve-form-item>
      <ve-form-item label="保额" unit="元">
        <ve-input-number :precision="2" placeholder="请输入" v-model="info!.insuredSum" />
      </ve-form-item>
      <ve-form-item label="保险费" unit="元">
        <ve-input-number :precision="2" placeholder="请输入" v-model="info!.insureAmt" />
      </ve-form-item>
      <ve-form-item label="上传保险单" :borderBottom="false">
        <UploadFile v-model:fileId="info!.policyImgFileId" :fileTypes="fileTypes" :fileIndex="2" @change="uploadChangefile" />
      </ve-form-item>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { inject, ref } from 'vue'
  import UploadFile from '@/components/upload-file/index.vue'

  const props = defineProps({
    title: String,
    index: {
      type: Number,
      default: 0,
    },
    info: {
      type: Object,
      default: () => {},
    },
  })
  const form = inject<any>('form')

  const fileTypes = ref<any>(['pdf', 'jpg'])
  const emits = defineEmits(['delete', 'uploadChange'])

  const remoteSelectData = {
    prop: 'insureCompany',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'supplierInsure',
    },
  }

  const timeRangeConfirmFn = (value: any) => {
    form.compulsory[props.index].times = value[0] && value[1] ? value : []
  }

  const handleDelete = (index: number) => {
    emits('delete', index)
  }

  const uploadChangefile = (fileList: any) => {
    emits('uploadChange', fileList)
  }
</script>

<style lang="scss" scoped>
  .ve-form-item-disabled {
    background: #f6f8f9;
    padding-left: 32rpx;
    padding-right: 32rpx;
    color: #9ea5bb;
    .ve-form-item__body__right__content__unit {
      color: #9ea5bb;
    }

    &.leftLayout {
      .ve-form-item__body__right__content__slot {
        text-align: right;
      }
    }
  }
  .ve-form-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #3072f6;
    .ve-form-item-btn-text {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3072f6;
      margin-left: 18rpx;
    }
  }
  .ve-form-item-btn-have-data {
    margin-top: 32rpx;
  }
  .form-fee-content {
    width: 654rpx;
    background: #f7f8fa;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    margin-bottom: 32rpx;
    .form-fee-content-title {
      height: 88rpx;
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
      background: #f0f1f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .form-fee-content-title-text {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #191c27;
    }
    .form-fee-content-content {
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
    }
  }
</style>
